<template>
<div style="padding: 20px">
  <template>
    <Tabs :value="tabValue" @on-click="tabClick">
      <TabPane label="绘制小区" name="1">
<!--        <vxe-toolbar>-->
<!--          <template #buttons>-->
<!--            <vxe-button @click="drawResidential">绘制小区</vxe-button>-->
<!--          </template>-->
<!--        </vxe-toolbar>-->
        <div>
          <vxe-table
              align="center"
              border
              :data="tableData">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="name" title="小区名称"></vxe-column>
            <vxe-column field="address" title="小区地址"></vxe-column>
            <vxe-column field="measure" title="面积"></vxe-column>
            <vxe-column field="create_time" title="创建时间"></vxe-column>
<!--            <vxe-table-column title="操作">-->
<!--              <template v-slot="{ row }">-->
<!--                <Button type="primary" @click="updateResidential(row)">修改</Button>-->
<!--&lt;!&ndash;                <Button style="margin-left: 4px" type="primary" @click="showSw(row)">保障人员清单</Button>&ndash;&gt;-->
<!--              </template>-->
<!--            </vxe-table-column>-->
          </vxe-table>
          <grid-sw-user ref="gridSwUser"></grid-sw-user>
        </div>
        <Modal v-model="residential.Modal" title="小区信息" width="700" @on-ok="residentialConfirm">
          <Form :model="residential.form" :label-width="200">
            <FormItem label="小区名称">
              <Input style="width: 300px" v-model="residential.form.name" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="小区详细地址">
              <Input style="width: 300px" v-model="residential.form.address" type="textarea" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="小区类型">
              <Select style="width: 300px" v-model="residential.form.type" filterable>
                <Option value="1">专业化</Option>
                <Option value="2">保障型</Option>
                <Option value="3">产权自管</Option>
                <Option value="4">业主自治</Option>
                <Option value="5">散体楼</Option>
              </Select>
            </FormItem>
            <FormItem label="市直单位包保">
              <Input style="width: 300px" v-model="residential.form.szdwbb" type="text" placeholder="市直单位包保"></Input>
            </FormItem>
            <FormItem label="市直单位所属党支部包保">
              <Input style="width: 300px" v-model="residential.form.szdzbbb" type="textarea" placeholder="市直单位所属党支部包保"></Input>
            </FormItem>
            <FormItem label="小区坐标">
              <Input style="width: 200px" disabled v-model="residential.form.csc_mapjson"></Input>
              <Button style="margin-left: 20px" @click="arouseMap">选择</Button>
            </FormItem>
          </Form>
        </Modal>
        <new-map-polygon ref="newMapPolygon" @returnMapInfo="returnMapInfo"></new-map-polygon>
      </TabPane>
      <TabPane label="选择网格" name="2">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button @click="xzGarden">选择网格</vxe-button>
          </template>
        </vxe-toolbar>
        <div>
          <vxe-table
              align="center"
              border
              :data="tableDataForTask">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="residential_name" title="小区名称"></vxe-column>
            <vxe-column field="garden_name" title="网格名称"></vxe-column>
            <vxe-column field="create_time" title="申请时间"></vxe-column>
            <vxe-column field="examine_type" title="申请状态">
              <template v-slot="{ row }">
                <span v-show="row.examine_type === '0'">等待系统处理</span>
                <span v-show="row.examine_type === '1'">系统处理中</span>
                <span v-show="row.examine_type === '2'">系统处理完成</span>
                <span v-show="row.examine_type === '3'">系统处理失败</span>
              </template>
            </vxe-column>
            <vxe-column field="begin_time" title="数据处理开始时间"></vxe-column>
            <vxe-column field="end_time" title="数据处理结束时间"></vxe-column>
          </vxe-table>
        </div>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Modal v-model="PickGarden.Modal" title="选择网格" width="1000" @on-ok="pickGardenConfirm">
          <div class="divtitleClass">
            选择小区
          </div>
          <Select v-model="PickGarden.residential_id">
            <Option v-for="(item,index) in residentialSelect" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
          <div class="divtitleClass">
            选择网格
          </div>
          <Select v-model="PickGarden.garden_id">
            <Option v-for="(item,index) in GardenSelect" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
        </Modal>
      </TabPane>
    </Tabs>
  </template>
</div>
</template>

<script>
import NewMapPolygon from '../new-map-polygon/new-map-polygon'
import gridSwUser from '@/view/xian-page/grid-sw/grid-sw-user/grid-sw-user'
import { getCompanyInfo } from '../../../api/grid-statistics'
import {
  createGridResidential,
  createGridResidentialGarden,
  findCommunityXJList, findGridResidentialList,
  findResidentialList
} from '../../../api/eventlist'
import { mapTypeChange } from '../../../libs/mapTypeUtil'
export default {
  name: 'index',
  components: { NewMapPolygon, gridSwUser },
  data () {
    return {
      companyInfo: {},
      tableData: [],
      tableDataForTask: [],
      polygons: [],
      residential: {
        Modal: false,
        form: {}
      },
      tabValue: '1',
      PickGarden: {
        Modal: false,
        residential_id: '',
        garden_id: ''
      },
      residentialSelect: [],
      GardenSelect: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    showSw (row) {
      this.$refs.gridSwUser.init(row)
    },
    pageAction (page) {
      this.params.pageNo = page
      this.findGridResidentialList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findGridResidentialList(this.params.pageNo)
    },
    tabClick (val) {
      console.log(val)
      if (val === '1') {
        this.findResidentialList()
      }
      if (val === '2') {
        this.findGridResidentialList()
      }
    },
    findGridResidentialList () {
      let data = this.params
      findGridResidentialList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableDataForTask = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    pickGardenConfirm () {
      let data = {
        residential_id: this.PickGarden.residential_id,
        garden_id: this.PickGarden.garden_id,
        map_type: mapTypeChange()
      }
      createGridResidentialGarden(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '创建成功', desc: ret.data.errmsg })
          this.findGridResidentialList()
        } else {
          this.$Notice.error({ title: '创建失败', desc: ret.data.errmsg })
        }
      })
    },
    xzGarden () {
      this.PickGarden.Modal = true
      this.PickGarden.garden_id = ''
      this.PickGarden.residential_id = ''
      this.findResidentialList()
      this.findCommunityXJList()
    },
    residentialConfirm () {
      let data = this.residential.form
      createGridResidential(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
          this.$Notice.success({ title: '创建成功', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '创建失败', desc: ret.data.errmsg })
        }
      })
    },
    drawResidential () {
      this.residential.form = {}
      this.$refs.newMapPolygon.insertInit(this.companyInfo)
    },
    returnMapInfo (e) {
      this.residential.Modal = true
      if (e.name) {
        this.residential.form.name = e.name
      }
      if (e.address) {
        this.residential.form.address = e.address
      }
      if (e.csc_mapjson) {
        this.residential.form.csc_mapjson = e.csc_mapjson
      }
      if (e.measure) {
        this.residential.form.measure = e.measure
      }
    },
    getCompanyInfo (e) {
      getCompanyInfo(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.companyInfo = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    init () {
      findResidentialList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = []
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询小区下拉
    findResidentialList () {
      findResidentialList().then(ret => {
        if (ret.data.errcode === 0) {
          this.residentialSelect = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 查询网格下拉
    findCommunityXJList () {
      let data = {
        id: this.$store.state.user.severUserInfo.company_id
      }
      findCommunityXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GardenSelect = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 修改小区信息
    updateResidential (e) {
      let data = this.$common.xeUtils.clone(e)
      this.residential.form = data
      this.residential.Modal = true
    },
    // 选择按钮唤起地图
    arouseMap () {
      this.$refs.newMapPolygon.updateInit(this.residential.form)
    }
  },
  mounted () {
    let severUserInfo = this.$store.state.user.severUserInfo
    this.getCompanyInfo(severUserInfo)
    this.init()
  }
}
</script>

<style scoped>
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
.page_style {
  margin: 20px 5px 200px 5px;
}
</style>
